<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header alitem curr" @click="backChange">
        <el-icon size="24" style="cursor: pointer">
          <ArrowLeftBold />
        </el-icon>
        <span>新建商品</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 1000px"
      :model="ruleForm"
      label-width="150px"
    >
      <el-form-item label="商品类型" prop="name" class="margintop">
        <el-button
          plain
          v-for="(item, index) in buttonTab"
          :key="index"
          :type="index === idxTab ? 'primary' : ''"
          @click="tabChange(item, index)"
          >{{ item }}
        </el-button>
      </el-form-item>
      <el-form-item label="" v-if="idxTab == 1">
        <el-checkbox
          v-model="checked1"
          label="是否需要配送"
          size="large"
          @change="checkChange"
        />
      </el-form-item>
      <el-form-item label="">
        <div style="color: rgb(164, 164, 164); font-size: 12px">
          若选“专家填报”，提供“智能辅助填报”功能
        </div>
      </el-form-item>
      <el-form-item label="商品名称" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品简介" prop="name" class="margintop">
        <el-input
          v-model="ruleForm.miniProgramDescription"
          type="textarea"
          :rows="5"
          placeholder="请输入商品名称"
        />
      </el-form-item>
      <div class="flex">
        <el-form-item label="商品价格" prop="name" class="margintop">
          <el-input-number v-model="ruleForm.basePrice" :min="0.01" />
          <div style="color: rgb(164, 164, 164)">（价格设置需≥0.01元）</div>
        </el-form-item>
        <el-form-item
          label="折扣价格"
          prop="name"
          class="margintop"
          style="margin-left: 20px"
        >
          <el-input-number v-model="ruleForm.realPrice" :min="0.01" />
          <div style="color: rgb(164, 164, 164)">
            (折扣价为空，视为原价（价格设置需≥0.01元）
          </div>
        </el-form-item>
      </div>

      <el-form-item label="封面图片" prop="name" class="margintop">
        <ImageUpload
          :limit="1"
          @uploadChange="uploadChange"
          @update:modelValue="modelValue"
        ></ImageUpload>
      </el-form-item>

      <el-form-item label="封面描述" prop="name" class="margintop">
        <el-input v-model="ruleForm.description" type="textarea" :rows="5" />
      </el-form-item>

      <el-form-item label="轮播图片" prop="name" class="margintop">
        <ImageUpload
          :is-show-tip="false"
          :limit="4"
          @update:modelValue="modelValuesChange"
        ></ImageUpload>
      </el-form-item>
      <el-form-item label="详情介绍(电脑版)" prop="name" class="margintop">
        <!-- <Editor :height="400" @update:modelValue="editorChange"></Editor> -->
        <UEditorPlus
          :id="id1"
          @update:modelValue="editorChange"
          v-model="content1"
        />
      </el-form-item>
      <el-form-item label="详情介绍(移动端)" prop="name" class="margintop">
        <!-- <Editor :height="400" @update:modelValue="editorPhoneChange"></Editor> -->
        <UEditorPlus
          :id="id2"
          @update:modelValue="editorPhoneChange"
          v-model="content2"
        />
      </el-form-item>
      <el-form-item style="padding-left: 170px" class="margintop">
        <el-button
          type="primary"
          style="width: 170px"
          class="height40"
          @click="submitForm(ruleFormRef)"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

import { servicesCreate } from '@/api/service/service.js';
const content1 = '';
const content2 = '';
const id1 = 'addNewGood1';
const id2 = 'addNewGood2';

const checked1 = ref(false);
const router = useRouter();
const ruleForm = reactive({
  bigTypeId: '', // 商品类型
  bigTypeName: '专家填报', // 商品类型 设置默认信息
  isNeedAddress: '0',
  picUrl: '', // 图片地址
  bannersPicUrl: '', // 图片地址
  pcDescription: '', // 电脑详细信息
  appDescription: '', // 移动端介绍信息
});
const buttonTab = ref(['专家填报', '自营服务']);
const idxTab = ref(0);

// 移动端输入信息
function editorPhoneChange(val) {
  ruleForm.appDescription = val;
}

// 电脑端输入信息
function editorChange(val) {
  ruleForm.pcDescription = val;
}

function modelValuesChange(val) {
  ruleForm.bannersPicUrl = val; // 保存多张图片
}

function modelValue(val) {
  ruleForm.picUrl = val; // 保存单张图片
}

function tabChange(val, idx) {
  idxTab.value = idx;
  ruleForm.bigTypeId = JSON.stringify(idx);
  ruleForm.bigTypeName = val; //0 ? '专家填报' : '自营服务'
}

function checkChange(val) {
  ruleForm.isNeedAddress = val === true ? '1' : '0';
}

function submitForm() {
  servicesCreate(ruleForm).then((res) => {
    if (res.code === 20000) {
      ElMessage.success(res.msg);
      backChange();
    }
  });
}

function backChange() {
  router.go(-1);
}
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
